/**
 * Created by henian.xu on 2016/11/18.
 */
(function ($) {
  var
    plugName = 'tabs',
    plugVersion = '0.1.0';

  $[plugName] = function (el, options) {
    var
      $target = $(el),
      cfg = $.extend(true, {}, $[plugName].defaults, options),
      method = {};
    var
      $nav = $target.children('.z-tabs-nav'),
      $content = $target.children('.z-tabs-content'),
      $container = $nav.children('.z-tabs-tab-container'),
      $prev = $container.children('.z-tabs-tab-prev'),
      $next = $container.children('.z-tabs-tab-next'),
      $wrap = $container.children('.z-tabs-tab-wrap'),
      $offset = $wrap.children('.z-tabs-tab-offset')
    ;

    //缓存实例对象
    $target.data('zte-' + plugName, $target);

    method = {
      init: function () {
        method.initScroll();
        method.eventInit();
        method.onClickTarget();
        var $active = $offset.children('.z-tabs-tab.z-active')
        if ($active.length) {
          method.tabShow($active.eq(0));
        }
      },
      //事件绑定
      eventInit: function () {
        $target.delegate('.z-tabs-tab', 'click', function () {
          method.gotoTab(this);
        });
        $target.delegate('.z-tabs-tab-prev', 'click', method.onPrev);
        $target.delegate('.z-tabs-tab-next', 'click', method.onNext);
      },
      //被惰性创建的实例
      onClickTarget: function () {
        if (!cfg.clickTarget)return;
        if (cfg.clickTarget.hasClass('z-tabs-tab')) {
          method.gotoTab(cfg.clickTarget);
        } else if (cfg.clickTarget.hasClass('z-tabs-tab-prev')) {
          $prev.trigger('click');
        } else if (cfg.clickTarget.hasClass('z-tabs-tab-next')) {
          $next.trigger('click');
        }
      },
      //跳到第几页
      gotoTab: function (target) {
        var
          index,
          $tabs = $offset.children('.z-tabs-tab'),
          $panes = $content.children('.z-tabs-pane');

        if (typeof target !== 'number') {
          index = $tabs.index(target);
        } else {
          index = target;
        }

        $tabs.removeClass('z-active').eq(index).addClass('z-active');
        $panes.removeClass('z-active').eq(index).addClass('z-active');

        method.tabShow($tabs.eq(index));

        $.isFunction(cfg.tabsChange)&&cfg.tabsChange.call($target,$tabs.eq(index),$panes.eq(index),index);

      },
      //保证tab显示
      tabShow: function ($tab) {
        var
          offset = $offset.data('z-tabs-offset') || 0,
          position = $tab.position(),
          left = position.left + offset,
          right = (position.left + $tab.innerWidth() + offset) - $wrap.width();
        if (left < 0) {
          offset -= left;
          $offset.animate({'left': offset}, 300).data('z-tabs-offset', offset);
        } else if (right > 0) {
          offset -= right;
          $offset.animate({'left': offset}, 300).data('z-tabs-offset', offset);
        }
      },
      initScroll: function () {
        if ($offset.width() > $wrap.width()) {
          $container.addClass('z-tabs-tab-scroll');
        } else {
          $container.removeClass('z-tabs-tab-scroll');
        }

        if (!$prev.length) {
          $prev = $('<span class="z-tabs-tab-prev fa fa-angle-left"></span>');
          $container.prepend($prev);
        }
        if (!$next.length) {
          $next = $('<span class="z-tabs-tab-next fa fa-angle-right"></span>');
          $container.prepend($next);
        }

      },
      //上一页
      onPrev: function () {
        if ($prev.hasClass('disabled'))return;
        var
          Wwidth = $wrap.width(),
          Owidth = $offset.width(),
          offset = $offset.data('z-tabs-offset') || 0,
          totalOffset = Wwidth - Owidth;
        if (totalOffset > 0) {
          method.initScroll();
          $offset.animate({'left': '0'}, 500);
          return;
        }
        offset = offset + (Wwidth - 20);
        if (offset > 0) {
          offset = 0;
          $prev.addClass('disabled');
        }
        $next.removeClass('disabled');
        $offset.animate({'left': offset}, 500).data('z-tabs-offset', offset);
      },
      //下一页
      onNext: function () {
        if ($next.hasClass('disabled'))return;
        var
          Wwidth = $wrap.width(),
          Owidth = $offset.width(),
          offset = $offset.data('z-tabs-offset') || 0,
          totalOffset = Wwidth - Owidth;
        if (totalOffset > 0) {
          method.initScroll();
          $offset.animate({'left': '0'}, 500);
          return;
        }
        offset = offset - (Wwidth - 20);
        if (offset < totalOffset) {
          offset = totalOffset;
          $next.addClass('disabled');
        }
        $prev.removeClass('disabled');
        $offset.animate({'left': offset}, 500).data('z-tabs-offset', offset);
      }

    };

    method.init();
  };

  $[plugName].defaults = {
    clickTarget: null,//惰性加载被点击目标
    tabsChange:function () {}
  };

  $.fn[plugName] = function (options) {
    options = options || {};
    if (typeof options === 'object') {
      return this.each(function () {
        var $plug = $(this).data('zte-' + plugName);
        if ($plug === undefined) {
          //创建实例对象
          new $[plugName](this, options);
        } else {
          //实例对象已存在
        }
      })
    } else {
      //其它参数类型
    }

  };

  //惰性加载用法
  $(document).delegate('.z-tabs', 'click', function (e) {
    var $target = $(e.target);
    if (!$target.hasClass('z-tabs-tab')) {
      $target = $target.closest('.z-tabs-tab');
    }
    if ($(this).data('zte-' + plugName) !== undefined) {
      return;
    } else if ($target.hasClass('z-tabs-tab')
      || $target.hasClass('z-tabs-tab-prev')
      || $target.hasClass('z-tabs-tab-next')) {
      new $[plugName](this, {clickTarget: $target});
    }
  });


  return $[plugName];
})(jQuery);